<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <title>一个什么奇怪的日历</title>
    <link
        rel="stylesheet"
        href="https://image-space.thebestxt.cc/website/css/ele-plus.css"
    />
    <!-- Import Vue 3 -->
    <script src="https://image-space.thebestxt.cc/website/js/ele-plus-zh-cn.js"></script>
    <script src="https://image-space.thebestxt.cc/website/js/vue3.js"></script>
    <!-- Import component library -->
    <script src="https://image-space.thebestxt.cc/website/js/ele-plus.js"></script>
    <script src="https://image-space.thebestxt.cc/website/js/ele-plus-icon.js"></script>

    <style>
        html, body {
            margin: 0 !important;
        }
        #app {
            width: 100vw;
            height: 100vh;
            overflow: hidden;
        }
        
        .selector {
            width: 100%;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            position: absolute;
            top: 10px;
            left: 0;
            z-index: 100;
        }

        .images-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: 8;
            overflow: hidden;
        }
        .images-container .images-swipe {
            position: absolute;
            top: 0;
            left: 0;
            height: 100vh;
            display: flex;
            flex-direction: row;
            z-index: 8;
            transition: all linear 0.3s;
        }
        .image {
            width: 100vw;
            height: 100vh;
            z-index: 9;
        }
        .image-error {
            width: 100vw;
            height: 100vh;
            left: 0;
            top: 0;
            z-index: 9;
            line-height: 100vh;
            text-align: center;
        }
        .arrows {
            position: absolute;
            top: 0;
            left: 0;
            width: 100vw;
            height: 44px;
            z-index: 11;
        }

        .arrows .arrow {
            position: absolute;
            top: 50vh;
            color: white;
            background-color: lightgray;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .arrows .arrow:active {
            background-color: gray;
        }
        .arrows .arrow.left {
            left: 10px;
        }
        .arrows .arrow.right {
            right: 10px;
        }
        .tip {
            position: absolute;
            bottom: 60px;
            left: 0;
            width: 100vw;
            height: 44px;
            z-index: 10;
            font-size: small;
            color: gray;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="selector">
            <el-date-picker
                v-model="ddate"
                type="date"
                placeholder="选择日期"
                format="YYYY/MM/DD"
                value-format="YYYY/MM/DD"
                :disabled-date="disabledDate"
                @change="dateChange"
            />
        </div>
        <div class="images-container">
            <div class="images-swipe" :style="{width: `${list.length * 100}vw`, left: `${currentPicIndex * -100}vw`}">
                <el-image class="swiper-slide image" v-for="(item, index) in list" :src="'https://image-space.thebestxt.cc/' + item.key" :key="item.key" fit="scale-down">
                    <template #error>
                        <div class="image-error">
                            该图片不存在
                        </div>
                    </template>
                    <template #placeholder>
                        <div class="image-error">
                            图片加载中
                        </div>
                    </template>
                </el-image>
            </div>
        </div>
        <div class="arrows">
            <div class="arrow left" v-show="leftArrowEnable" @click="handleLeft">
                <el-icon><Component is="ArrowLeftBold"/></el-icon>
            </div>
            <div class="arrow right" v-show="rightArrowEnable" @click="handleRight">
                <el-icon><Component is="ArrowRightBold"/></el-icon>
            </div>
        </div>
        <div class="tip">
            @{pageInfo} <br/>
            @{currentFileName} <br/>
            点击箭头切换图片，长按图片可以保存。
        </div>
    </div>
    <script>
        const { createApp, ref, onMounted, computed, watch } = Vue
        const app = createApp({
            setup() {
                const ddate = ref('')
                const urlTemplate = 'https://image-space.thebestxt.cc/xue_calendar/{date}.jpg'

                const list = ref(JSON.parse('{{ list | safe }}'))
                console.log('list', list)
                

                const dateChange = ()=> {
                    const d = new Date(ddate.value)
                    year = d.getFullYear().toString()
                    month = (d.getMonth() - 0 + 1).toString()
                    date = d.getDate().toString()
                    const newDdate = [month, date].join('.')
                    window.location.href = '/xue_calendar/?date=' + newDdate
                }
                
                const getQueryString = name => {
                    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
                    var r = window.location.search.substr(1).match(reg);
                    if (r != null) return r[2];
                    return null;
                }

                const currentPicIndex = ref(0)
                const leftArrowEnable = computed(() => currentPicIndex.value > 0)
                const rightArrowEnable = computed(() => currentPicIndex.value < list.value.length - 1)
                const handleLeft = () => {
                    if (leftArrowEnable.value === true) {
                        currentPicIndex.value -= 1
                    }
                }
                const handleRight = () => {
                    if (rightArrowEnable.value === true) {
                        currentPicIndex.value += 1
                    }
                }

                const currentFileName = computed(() => {
                    if (list.value && list.value[currentPicIndex.value] && list.value[currentPicIndex.value].key) {
                        return list.value[currentPicIndex.value].key.replaceAll('xue_calendar/', '')
                    } else {
                        return ''
                    }
                })
                const pageInfo = computed(() => list.value.length > 0 ? `${currentPicIndex.value - 0 + 1}/${list.value.length}`: '该日期没有图片')

                const disabledDate = date => {
                    return Date.parse(date) < Date.parse(new Date('2025/01/01')) || Date.parse(date) > Date.parse(new Date('2025/12/31'))
                }

                const initDdate = () => {
                    const dateString = getQueryString('date')
                    let d = new Date()
                    if (dateString) {
                        const [templateM, templateD] = dateString.split('.')
                        d = new Date(`2025/${templateM}/${templateD}`)
                    } else {
                        d = new Date(`2025/01/01`)  
                    }
                    const year = d.getFullYear().toString()
                    const month = (d.getMonth() - 0 + 1) > 9? (d.getMonth() - 0 + 1).toString() : '0' + (d.getMonth() - 0 + 1).toString()
                    const date = d.getDate() > 9? d.getDate().toString() : '0' + d.getDate().toString()
                    ddate.value = [year, month, date].join('/')
                }
                onMounted(() => {
                    initDdate()
                })

                return {
                    list,
                    ddate,
                    dateChange,
                    leftArrowEnable,
                    handleLeft,
                    rightArrowEnable,
                    handleRight,
                    currentPicIndex,
                    currentFileName,
                    pageInfo,
                    disabledDate
                }
            }
        })
        app.config.compilerOptions.delimiters = ['@{', '}']
        
        app.use(ElementPlus, {
            locale: ElementPlusLocaleZhCn,
        })
        for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
            app.component(key, component)
        }
        app.mount('#app')
    </script>
</body>
</html>